<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem href="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/configs/role">角色管理</BreadcrumbItem>
			    <BreadcrumbItem :href="url" @>角色更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
					<IInput v-model="form.id" class="hide" />
			        <FormItem prop="name" label="角色英文名">
			            <IInput v-model="form.name" size="large" placeholder="角色英文名" />
			        </FormItem>
			        <FormItem prop="displayName" label="角色中文名">
			            <IInput v-model="form.displayName" size="large" placeholder="角色中文名" />
			        </FormItem>
			        <FormItem prop="description" label="描述">
			            <IInput v-model="form.description"  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="角色描述" />
			        </FormItem>
			        <FormItem prop="permissions" label="权限列表">
			        	<CheckboxGroup v-model="form.permissions" @on-change="checkAllGroupChange">
			        			<Checkbox v-for="(checkbox,index) in checkBoxs" :key="checkbox.id" :label="checkbox.id" >{{checkbox.txt}}</Checkbox>	
					    </CheckboxGroup>
			        </FormItem>
			        <FormItem>
			        	<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">权限全选</Checkbox>
			        </FormItem>
			        <FormItem>
			        	<IButton type="primary" @click="submit('form')">提交</IButton>
			        </FormItem>
			    </IForm>
		    </div>
		</div>
	</div>
</template>
<script>
	import Breadcrumb from 'iview/src/components/breadcrumb';
	import Form from 'iview/src/components/form';
    import Input from 'iview/src/components/input';
    import Button from 'iview/src/components/button';
    import Checkbox from 'iview/src/components/checkbox';

    import Axios from 'admin/config/axios';

	export default{
		data () {
			const validateName=(rule , value ,callback)=>{
	            var reg = /^[A-Za-z]+$/;
	            if(!reg.test(value)){
	                callback(new Error('请填写合法角色英文名'));
	            }
	            Axios.Configs.Role.CheckName({name:value,id:this.form.id})
	            .then(res =>{
	                callback();
	            })
	        };
	        const validateDisplayName=(rule , value ,callback)=>{
	            var reg = /^[\u4E00-\u9FA5]+$/;
	            if(!reg.test(value)){
	                callback(new Error('请填写合法中文名'));
	            }
	            callback();
	        };
            return {
                form :{
					id : 0,
					name : '',
					displayName  : '',
					description  : '',
					permissions : [],
                },
				rawHtml : '',
				url : '/configs/role/update',
				checkBoxs : [],
				indeterminate: false,
				checkAll: false,
                formRule: {
	                name: [
	                    { required: true, message: '请填写角色英文名', trigger: 'blur' },
	                    { validator: validateName, trigger: 'blur'}
	                ],
	                displayName: [
	                    { required: true, message: '请填写角色中文名', trigger: 'blur' },
	                    { validator: validateDisplayName, trigger: 'blur'}
	                ],
	                permissions: [
	                    { required: true, message: '请至少选择一个权限'},
	                ],
	            },
            }
        },
		components:{
            Breadcrumb,
            "BreadcrumbItem" : Breadcrumb.Item,
            'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			'IButton' : Button,
			Checkbox,
			"CheckboxGroup" : Checkbox.Group,
        },
        methods: {
        	submit(name){
        		this.$refs[name].validate((valid) => {
	                if (!valid) {
	                    return false;
	                }
	                Axios.Configs.Role.Update(this.form)
		            .then(res =>{
		                if(res.code!=0){
		                    this.$Message.error(res.msg);return;
		                }
		                this.$router.go(-1);
		            })
		            .catch(error =>{
		                this.$Message.error(error);
		            })
	            })
        	},
        	handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                	var all = [];
                	var boxs = this.checkBoxs;
                	for(var i in boxs){
                		all.push(boxs[i]['id']);
                	}
                    this.form.permissions = all;
                } else {
                    this.form.permissions = [];
                }
            },
        	checkAllGroupChange (data) {
                if (data.length === this.checkBoxs.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            }
        },
        created: function() {
        	this.$Loading.start();
		    //获取所有权限
		    Axios.Configs.Permission.All()
            .then(res =>{
                if(res.code==0){
                   var data = res.data;
                }
                for(var i in data){
                	this.checkBoxs.push({
		        		'id': data[i]['id'],
		        		'txt' : data[i]['displayName'],
		        	})
                }
                this.checkAllGroupChange(this.form.permissions);
            })
            .catch(error =>{
                
            })

	        //面包屑导航路径赋值、获取角色信息
	        if(this.$route.params.id!==undefined){
	        	
	        	var id = this.$route.params.id;
		    	this.url += '/'+id;
		    	Axios.Configs.Role.Get(id)
	            .then(res =>{
	                if(res.code>0){
	                	this.$Message.error(res.msg);return false;
	                }
	                var data = res.data;
	                this.form.id = data.id;
	                this.form.name = data.name;
	                this.form.displayName = data.displayName;
	                this.form.description = data.description;
	                for(var i in data.permissions){
	                	this.form.permissions.push(data.permissions[i]['id']);
	                }
	                this.checkAllGroupChange(this.form.permissions);
	                
	            })
	            .catch(error =>{
	                
	            })
		    }
		    this.$Loading.finish();
		}
	}
</script>